<template>
  <el-card class="box-card">
    <div slot="header" class="box-header">
      <span>召唤师技能资料</span>

      <el-switch
        style="display: block"
        v-model="viewValue"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-value="1"
        inactive-value="0"
        active-text="多宫格视图"
      >
      </el-switch>
    </div>
    <div>
      <!--列表视图-->
      <el-table
        v-if="viewValue === '0'"
        ref="filterTable"
        :data="filterTableData"
      >
        <el-table-column label="技能" sortable width="180">
          <template slot-scope="scope">
            <el-avatar
              shape="square"
              :size="40"
              :src="
                'https://game.gtimg.cn/images/yxzj/img201606/summoner/' +
                scope.row.summoner_id +
                '.jpg'
              "
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="summoner_id"
          label="技能编号"
          sortable
          width="100"
        ></el-table-column>
        <el-table-column prop="summoner_name" label="技能名称" width="100">
        </el-table-column>
        <el-table-column prop="summoner_rank" label="解锁级别" width="100">
        </el-table-column>

        <el-table-column
          prop="summoner_description"
          label="装备描述"
          width="500"
        ></el-table-column>

        <el-table-column>
          <template #header>
            <el-input
              v-model="searchValue"
              size="mini"
              placeholder="输入名称关键字模糊搜索"
            />
          </template>
        </el-table-column>
      </el-table>

      <!--多宫格视图-->
      <el-row v-if="viewValue === '1'">
        <el-col :span="12" class="box-col-left">
          <div  v-for="(item, index) in filterTableData" :key="item.summoner_id">
            <el-image
              style="
                width: 100px;
                height: 100px;
                margin: 20px;
                border-radius: 10px 0px 10px 0px;
                cursor: pointer;
                box-shadow: 0 0 10px blue;
              "
              :src="
                'https://game.gtimg.cn/images/yxzj/img201606/summoner/' +
                item.summoner_id +
                '.jpg'
              "
              @click="changeImage(index)"
            ></el-image>
             <h4>{{item.summoner_name}}</h4>
          </div>
        </el-col>
        <el-col :span="12" class="box-col-right">
          <el-image
            style="width: 560px; height: 370px; border-radius: 5px 5px 5px 5px"
            :src="
              'https://game.gtimg.cn/images/yxzj/img201606/summoner/' +
              filterTableData[imageIndex].summoner_id +
              '-big.jpg'
            "
          ></el-image>
          <h4>{{ filterTableData[imageIndex].summoner_name }}</h4>
          <p>{{ filterTableData[imageIndex].summoner_rank }}</p>
          <p>{{ filterTableData[imageIndex].summoner_description }}</p>
        </el-col>
      </el-row>

      <!--分页部分-->
      <el-row type="flex" justify="space-between">
        <el-col class="el-col-left" :span="12"> </el-col>
        <el-col class="el-col-right" type="flex" justify="space-between">
          <el-pagination
            layout="prev, pager, next"
            :total="tableData.length"
            :page-size="pageSize"
            @current-change="currentChange"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      searchValue: "", //搜索关键字
      selectValue: "", //下拉关键字
      pageSize: 6, //每页多少条
      pageNum: 1, //当前页
      viewValue: "1",
      imageIndex: 0,
    };
  },
  created() {
    this.query();
  },
  methods: {
    query() {
      fetch("http://47.241.102.141:3000/summoners")
        .then((response) => response.json())
        .then((data) => {
          this.tableData = data;
        });
    },
    currentChange(val) {
      this.pageNum = val;
    },
    changeImage(index) {
      this.imageIndex = index;
    },
  },
  watch: {},
  computed: {
    //u过滤数据实现分页和搜索效果  这个做法有点难理解  建议使用两个数组 倒换数据
    filterTableData() {
      //先搜索
      let newTable = this.tableData.filter((item) => {
        return (
          !this.searchValue ||
          item.summoner_name.includes(this.searchValue.trim())
        );
      });

      //在分类（没有用上）
      let newTable2 = newTable.filter(() => {
        return !this.selectValue;
      });

      //在分页  搜索的数据必须在第一页
      if (newTable2.length <= this.pageSize) {
        return newTable2;
      } else {
        let finalTable = newTable2.filter((item, index) => {
          let start = (this.pageNum - 1) * this.pageSize;
          let end = start + this.pageSize;
          return index >= start && index < end;
        });
        return finalTable;
      }
    },
  },
};
</script>
<style>
.box-card {
  width: 90%;
}

.box-header {
  display: flex;
  justify-content: space-between;
}
.box-col-left {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.box-col-right {
  text-align: left;
}
.box-col-right h4 {
  font-size: 18px;
  color: green;
}

.box-col-right h4,
p {
  width: 100%;
  text-align: left;
  line-height: 30px;
}
</style>